<template>
  <nav class="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between items-center h-20">
        <!-- Logo -->
        <div class="flex-shrink-0">
          <router-link to="/" class="flex items-center hover:opacity-80 transition-opacity duration-300">
            <span class="ml-3 text-2xl font-bold text-gray-900">佳茗</span>
          </router-link>
        </div>

        <!-- Desktop Navigation -->
        <div class="hidden md:block">
          <div class="ml-10 flex items-baseline space-x-10">
            <router-link
              to="/"
              class="nav-link"
              :class="{ 'text-primary-600 border-b-2 border-primary-600': $route.name === 'Home' }"
            >
              首页
            </router-link>
            <router-link
              to="/blog"
              class="nav-link"
              :class="{ 'text-primary-600 border-b-2 border-primary-600': $route.name === 'Blog' }"
            >
              博客
            </router-link>
            <router-link
              to="/about"
              class="nav-link"
              :class="{ 'text-primary-600 border-b-2 border-primary-600': $route.name === 'About' }"
            >
              关于
            </router-link>
          </div>
        </div>

        <!-- Mobile menu button -->
        <div class="md:hidden">
          <button
            @click="mobileMenuOpen = !mobileMenuOpen"
            class="text-gray-600 hover:text-gray-900 focus:outline-none focus:text-gray-900"
          >
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path v-if="!mobileMenuOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
              <path v-else stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
      </div>

      <!-- Mobile Navigation -->
      <div v-show="mobileMenuOpen" class="md:hidden">
        <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 border-t border-gray-200">
          <router-link
            to="/"
            @click="mobileMenuOpen = false"
            class="mobile-nav-link"
            :class="{ 'text-primary-600 bg-primary-50': $route.name === 'Home' }"
          >
            首页
          </router-link>
          <router-link
            to="/blog"
            @click="mobileMenuOpen = false"
            class="mobile-nav-link"
            :class="{ 'text-primary-600 bg-primary-50': $route.name === 'Blog' }"
          >
            博客
          </router-link>
          <router-link
            to="/about"
            @click="mobileMenuOpen = false"
            class="mobile-nav-link"
            :class="{ 'text-primary-600 bg-primary-50': $route.name === 'About' }"
          >
            关于
          </router-link>
        </div>
      </div>
    </div>
  </nav>
</template>

<script setup>
import { ref } from 'vue'

const mobileMenuOpen = ref(false)
</script>

<style scoped>
.nav-link {
  @apply text-gray-800 hover:text-primary-600 px-4 py-3 text-lg font-semibold transition-all duration-300 border-b-2 border-transparent hover:border-primary-300 hover:shadow-sm;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.5px;
}

.nav-link:hover {
  transform: translateY(-1px);
}

.mobile-nav-link {
  @apply text-gray-800 hover:text-primary-600 block px-4 py-3 text-lg font-semibold rounded-md transition-all duration-300 hover:bg-primary-50;
  letter-spacing: 0.5px;
}
</style>
